<template>
  <div v-drag class="report-card" shadow="hover">
    <el-card style="max-width: 480px; max-height: 400px">
      <template #header>
        <div class="card-header">
          <span>报告路况</span>
          <span class="close" @mousedown.stop @click.prevent="closeCard">x</span>
        </div>
      </template>
      <p>
        事件类型
        <el-select @mousedown.stop v-model="eventType" placeholder="请选择事件类型" size="small" style="width: 300px">
          <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" /> </el-select
        ><span class="icon">*</span>
      </p>

      <p>
        事件地址
        <el-input @mousedown.stop v-model="eventAddress" placeholder="请输入路况地址,包含事故路段" style="width: 300px" /><span class="icon"
          >*</span
        >
      </p>
      <p>
        建筑标识
        <el-input @mousedown.stop v-model="building" placeholder="请输入事故最近的建筑标识" style="width: 300px" />
      </p>
      <p>
        发生时间
        <el-date-picker @mousedown.stop v-model="eventTime" type="datetime" placeholder="Select date and time" />
        <span class="icon">*</span>
      </p>
      <p>
        事件描述
        <el-input @mousedown.stop v-model="desc" placeholder="请输入事故描述" style="width: 300px" />
      </p>
      <template #footer>
        <div class="btns">
          <button @mousedown.stop @click.prevent="submit">确认</button>
          <button @mousedown.stop @click.prevent="closeCard">取消</button>
        </div>
      </template>
    </el-card>
  </div>
</template>

<script setup>
import { ref } from 'vue';
import { useUserStore } from '@/stores/user';
import { storeToRefs } from 'pinia';
const { reportShow } = storeToRefs(useUserStore());
const emit = defineEmits(['add-info']);
const { name } = storeToRefs(useUserStore());
const eventType = ref('');
const eventAddress = ref('');
const building = ref('');
const eventTime = ref('');
const desc = ref('');
const options = [
  { value: '碰撞', label: '碰撞' },
  { value: '刮擦', label: '刮擦' },
  { value: '翻车', label: '翻车' },
  { value: '碾压', label: '碾压' },
  { value: '爆炸', label: '爆炸' },
  { value: '失火', label: '失火' },
  { value: '其他', label: '其他' },
];
const closeCard = () => {
  document.querySelector('.report-card').style.display = 'none';
};

const submit = () => {
  reportShow.value = false;
  const roadInfo = {
    username: name.value,
    type: eventType.value,
    address: eventAddress.value,
    building: building.value,
    time: eventTime.value,
    desc: desc.value,
    status: '待审核',
  };
  emit('add-info', roadInfo);
  alert('报告路况成功');
};
</script>

<style lang="scss" scoped>
.report-card {
  position: absolute;
  top: 10%;
  left: 35%;
  width: 500px;
  z-index: 99;
  .card-header {
    span {
      font-size: 1.5em;
      color: #777;
      font-weight: 600;
    }
    .close {
      position: absolute;
      right: 50px;
      font-size: 16px;
      color: #bbb;
      cursor: pointer;
      padding: 5px;
    }
  }
  p {
    padding: 5px;
    font-size: 0.9em;
    font-weight: 600;
    cursor: pointer;
    .icon {
      color: red;
      margin-left: 10px;
    }
  }
  .btns {
    width: 200px;
    display: flex;
    gap: 20px;
    margin-left: 250px;
    button {
      padding: 10px 20px;
      border-radius: 5px;
      border: 1px solid #ccc;
      cursor: pointer;
    }
    button:first-child {
      background-color: #0f61a1;
      color: white;
    }
  }
}
:deep(.el-card__header) {
  padding: 10px 20px;
}
:deep(.el-card__footer) {
  padding: 10px 20px;
}
</style>
